<!--
 * @Author: xiaotiwen
 * @Date: 2020-06-22 10:33:05
 * @LastEditTime: 2020-07-17 15:51:02
 * @LastEditors: xiaotiwen
 * @FilePath: \eduweb\src\views\practiceManagement\internSetup\index.vue
 * @Description: 实习基地设置
-->

<template>
    <!-- 实习设置 -->
    <div class="edu-page-warp">
        <condition-card @search="onSubmit" @reset="reset">
            <el-row>
                <el-col :span="8">
                    <el-form-item :label="$t('label.schoolTerm')">
                        <CalendarSelect v-model="condition.yearTerm" @change="calendarChange" @load-done="loadDone"></CalendarSelect>
                    </el-form-item>
                </el-col>
            </el-row>
        </condition-card>

        <el-card shadow="never" body-style="padding: 24px;">
            <div class="edu-page-title"> {{$t('internSetup.title.indexTitle')}}</div>
            <div class="edu-opertion-bar">
                <div class="float-right">
                    <el-button @click="add()" type="primary">{{$t('message.add')}}</el-button>
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%" stripe>
                <el-table-column width="50" align="center" type="index" :index="indexMethod" :label="$t('message.order')" fixed="left" ></el-table-column>
                <el-table-column :label="$t('label.schoolTerm')" show-overflow-tooltip min-width="180" prop="yearTermText">
                </el-table-column>
                <el-table-column :label="$t('internSetup.label.confirmDate')" show-overflow-tooltip min-width="180">
                    <template slot-scope="scope">
                        <span>{{scope.row.confirmStartDate}}</span>~{{time(scope.row.confirmEndDate)}}
                    </template>
                </el-table-column>
                <el-table-column :label="$t('internSetup.label.cosArrangeDate')" show-overflow-tooltip min-width="180">
                    <template slot-scope="scope">
                        <span>{{scope.row.cosArrangeStartDate}}</span>~{{time(scope.row.cosArrangeEndDate)}}
                    </template>
                </el-table-column>
                <el-table-column :label="$t('internSetup.label.expenseReiburDate')" show-overflow-tooltip min-width="180">
                    <template slot-scope="scope">
                        <span>{{scope.row.expenseReiburStartDate}}</span>~{{time(scope.row.expenseReiburEndDate)}}
                    </template>
                </el-table-column>
                <el-table-column :label="$t('internSetup.label.reworkArrangeDate')" show-overflow-tooltip min-width="180">
                    <template slot-scope="scope">
                        <span>{{scope.row.practiceRetakeStartDate}}</span>~{{time(scope.row.practiceRetakeEndDate)}}
                    </template>
                </el-table-column>
                <el-table-column :label="$t('internSetup.label.activeFlag')" show-overflow-tooltip min-width="80" fixed="right">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.activeFlag == 'Y'" type="success">{{$t('practiceManagement.yes')}}</el-tag>
                        <el-tag v-if="scope.row.activeFlag == 'N'" type="warning">{{$t('practiceManagement.no')}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('message.operating')" min-width="130" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editor(scope.row)" size="mini">{{$t('message.edit')}}</el-button>
                        <el-button type="text" @click="details(scope.row)" size="mini">{{$t('message.detail')}}</el-button>
                        <el-button type="text" :disabled="scope.row.hasConfirmCourse === 'Y'&& scope.row.activeFlag=== 'Y' " @click="del(scope.row)" size="mini">{{$t('message.delete')}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="edu-pagination">
                <div class="float-right">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNum_" :page-sizes="[20,50,100,500,1000]" :page-size="page.pageSize_" layout="total, sizes, prev, pager, next, jumper" :total="page.total_" style="float:right;margin-top:10px"></el-pagination>
                </div>
            </div>
        </el-card>

        <!-- 新增弹框 -->
        <el-dialog :title="title" width="926px" :visible.sync="showDialog" :close-on-click-modal="false">
            <div id="roundBox" v-if="showDialog">
                <edu-form :model="form" ref="form" label-width="150px" :rules="rules">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item :label="$t('label.schoolTerm')" prop="yearTerm">
                                <CalendarSelect v-model="form.yearTerm" @change="calendarChange" :disabled="disabled"></CalendarSelect>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item :label="$t('internSetup.label.activeFlag')" prop="activeFlag">
                                <el-select v-model="form.activeFlag" :placeholder="$t('message.plzSelect')" style="width:100%" :disabled="disabled">
                                    <el-option :label="$t('message.yes')" value="Y"></el-option>
                                    <el-option :label="$t('message.no')" value="N"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item :label="$t('internSetup.label.confirmStartDate')" prop="confirmStartDate">
                                <el-date-picker v-model="form.confirmStartDate" type="date" :placeholder="$t('message.plzSelect')" value-format="yyyy-MM-dd" :disabled="disabled" :picker-options="pickerOptions">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item :label="$t('internSetup.label.confirmEndDate')" prop="confirmEndDate">
                                <el-date-picker v-model="form.confirmEndDate" type="date" :placeholder="$t('message.plzSelect')" value-format="yyyy-MM-dd" :disabled="disabled" :picker-options="pickerOptions2">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item :label="$t('internSetup.label.cosArrangeStartDate')" prop="cosArrangeStartDate">
                                <el-date-picker v-model="form.cosArrangeStartDate" type="date" :placeholder="$t('message.plzSelect')" value-format="yyyy-MM-dd" :disabled="disabled" :picker-options="pickerOptions3">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item :label="$t('internSetup.label.cosArrangeEndDate')" prop="cosArrangeEndDate">
                                <el-date-picker v-model="form.cosArrangeEndDate" type="date" :placeholder="$t('message.plzSelect')" value-format="yyyy-MM-dd" :disabled="disabled" :picker-options="pickerOptions4">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item :label="$t('internSetup.label.expenseReiburStartDate')" prop="expenseReiburStartDate">
                                <el-date-picker v-model="form.expenseReiburStartDate" type="date" :placeholder="$t('message.plzSelect')" value-format="yyyy-MM-dd" :disabled="disabled" :picker-options="pickerOptions5">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item :label="$t('internSetup.label.expenseReiburEndDate')" prop="expenseReiburEndDate">
                                <el-date-picker v-model="form.expenseReiburEndDate" type="date" :placeholder="$t('message.plzSelect')" value-format="yyyy-MM-dd" :disabled="disabled" :picker-options="pickerOptions6">>
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                                        <el-row>
                        <el-col :span="12">
                            <el-form-item :label="$t('internSetup.label.reworkArrangeStartDate')" prop="practiceRetakeStartDate">
                                <el-date-picker v-model="form.practiceRetakeStartDate" type="date" :placeholder="$t('message.plzSelect')" value-format="yyyy-MM-dd" :disabled="disabled" :picker-options="pickerOptions7">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item :label="$t('internSetup.label.reworkArrangeEndDate')" prop="practiceRetakeEndDate">
                                <el-date-picker v-model="form.practiceRetakeEndDate" type="date" :placeholder="$t('message.plzSelect')" value-format="yyyy-MM-dd" :disabled="disabled" :picker-options="pickerOptions8">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </edu-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="type==='0'" @click="cancelDialog">{{$t('message.cancel')}}</el-button>
                <el-button v-if="type==='0'" type="primary" @click="submitForm">{{$t('message.confirm')}}</el-button>
                <el-button v-if="type==='1'" @click="cancelDialog">{{$t('message.close')}}</el-button>

            </div>
        </el-dialog>

        <!-- 详情弹框 -->
        <el-dialog :title="title" width="926px" :visible.sync="detailsDialog" :close-on-click-modal="false">
            <div id="roundBox">
                <edu-form :model="detailsform" ref="form" label-width="150px" :rules="rules">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item :label="$t('label.schoolTerm')" prop="yearTerm">
                                <CalendarSelect v-model="detailsform.yearTerm" @change="calendarChange" :disabled="disabled"></CalendarSelect>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item :label="$t('internSetup.label.activeFlag')" prop="activeFlag">
                                <span v-if="detailsform.activeFlag==='Y' ">{{$t('message.yes')}}</span>
                                <span v-if="detailsform.activeFlag==='N' ">{{$t('message.no')}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item :label="$t('internSetup.label.confirmStartDate')" prop="confirmStartDate">
                                {{detailsform.confirmStartDate}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item :label="$t('internSetup.label.confirmEndDate')" prop="confirmEndDate">
                                {{detailsform.confirmEndDate||$t('internSetup.tips.long')}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item :label="$t('internSetup.label.cosArrangeStartDate')" prop="cosArrangeStartDate">
                                {{detailsform.cosArrangeStartDate}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item :label="$t('internSetup.label.cosArrangeEndDate')" prop="cosArrangeEndDate">
                                {{detailsform.cosArrangeEndDate||$t('internSetup.tips.long')}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item :label="$t('internSetup.label.expenseReiburStartDate')" prop="expenseReiburStartDate">
                                {{detailsform.expenseReiburStartDate}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item :label="$t('internSetup.label.expenseReiburEndDate')" prop="expenseReiburEndDate">
                                {{detailsform.expenseReiburEndDate||$t('internSetup.tips.long')}}

                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item :label="$t('internSetup.label.reworkArrangeStartDate')" prop="practiceRetakeStartDate">
                                {{detailsform.practiceRetakeStartDate}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item :label="$t('internSetup.label.reworkArrangeEndDate')" prop="practiceRetakeEndDate">
                                {{detailsform.practiceRetakeEndDate||$t('internSetup.tips.long')}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </edu-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="type==='0'" @click="cancelDialog">{{$t('message.cancel')}}</el-button>
                <el-button v-if="type==='0'" type="primary" @click="submitForm">{{$t('message.confirm')}}</el-button>
                <el-button v-if="type==='1'" @click="cancelDialog">{{$t('message.close')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { addLabel, update, queryList, deleApi } from "common/src/api/practiceManagement/internSetup";
import UTILS from "common/src/utils/utils";
export default {
    name: "practiceSetting",
    data() {
        return {
            title: this.$t('internSetup.title.addInternTitle'),
            showDialog: false,
            disabled: false,
            detailsDialog: false,
            type: "0",
            id: "",
            queryParams: {
                yearTerm: ""
            },
            form: {
                id: "",
                yearTerm: "",
                confirmStartDate: null,
                confirmEndDate: null,
                cosArrangeStartDate: null,
                cosArrangeEndDate: null,
                expenseReiburStartDate: null,
                expenseReiburEndDate: null,
                activeFlag: "",
                practiceRetakeEndDate:"",
                practiceRetakeStartDate:""
            },
            detailsform: {
                yearTerm: "",
                confirmStartDate: null,
                confirmEndDate: null,
                cosArrangeStartDate: null,
                cosArrangeEndDate: null,
                expenseReiburStartDate: null,
                expenseReiburEndDate: null,
                activeFlag: "",
            },
            page: {
                pageNum_: 1,
                pageSize_: 20,
                total_: 0
            },

            condition: {
                yearTerm: ""
            },
            timeStr: {
                startStr: "",
                endStr: ""
            },
            auditLog: {},
            tableData: [],

            options: {
                dept: [],

            },
            value1: null,
            value2: null,
            rules: {
                yearTerm: [{ required: true, message: this.$t('message.plzSelect'), trigger: "blur" }],
                activeFlag: [{ required: true, message: this.$t('message.plzSelect'), trigger: "change" }],
                confirmStartDate: [{ required: true, message: this.$t('message.plzSelect'), trigger: "change" }],
                cosArrangeStartDate: [{ required: true, message: this.$t('message.plzSelect'), trigger: "change" }],
                expenseReiburStartDate: [{ required: true, message: this.$t('message.plzSelect'), trigger: "change" }],
                practiceRetakeStartDate: [{ required: true, message: this.$t('message.plzSelect'), trigger: "change" }]
            },
            type: [
                {
                    "label": this.$t('message.yes'),
                    "value": "1"
                }, {
                    "label": this.$t('message.no'),
                    "value": "2"
                }
            ],
            pickerOptions: {
                disabledDate: time => {
                    if (this.form.confirmEndDate && !this.form.cosArrangeStartDate) {
                        return time.getTime() > new Date(this.form.confirmEndDate).getTime();
                    } else if (this.form.cosArrangeStartDate && !this.form.confirmEndDate) {
                        return time.getTime() > new Date(this.form.cosArrangeStartDate).getTime() - 86400000;
                    } else if (this.form.confirmEndDate && this.form.cosArrangeStartDate) {
                        let times = '';
                        (new Date(this.form.confirmEndDate).getTime() - new Date(this.form.cosArrangeStartDate).getTime() + 86400000) > 0 ? times = new Date(this.form.cosArrangeStartDate).getTime() - 86400000 : times = new Date(this.form.confirmEndDate).getTime()
                        return time.getTime() > times;
                    }
                }
            },
            pickerOptions2: {
                disabledDate: time => {
                    if (this.form.confirmStartDate) {
                        return time.getTime() < new Date(this.form.confirmStartDate).getTime() - 86400000;
                    }
                }

            },
            pickerOptions3: {
                disabledDate: time => {
                    if (this.form.confirmStartDate && !this.form.cosArrangeEndDate && !this.form.expenseReiburStartDate) {
                        return time.getTime() < new Date(this.form.confirmStartDate).getTime();
                    } else if (this.form.confirmStartDate && (this.form.cosArrangeEndDate || this.form.expenseReiburStartDate)) {
                        let times = '';
                        let time1 = new Date(this.form.cosArrangeEndDate).getTime();
                        let time2 = new Date(this.form.expenseReiburStartDate).getTime();
                        if (time1 && time1 > 0 && time2 && time2 > 0) {
                            time1 - time2 > 0 ? times = time2 - 86400000 : times = time1;
                        } else {
                            time1 && time1 > 0 ? times = time1 : times = time2 - 86400000;
                        }
                        return time.getTime() > times || time.getTime() < new Date(this.form.confirmStartDate).getTime();
                    } else if (!this.form.confirmStartDate && (this.form.cosArrangeEndDate || this.form.expenseReiburStartDate)) {
                        let times = '';
                        let time1 = new Date(this.form.cosArrangeEndDate).getTime();
                        let time2 = new Date(this.form.expenseReiburStartDate).getTime();
                        if (time1 && time1 > 0 && time2 && time2 > 0) {
                            time1 - time2 > 0 ? times = time2 : times = time1;
                        } else {
                            time1 && time1 > 0 ? times = time1 : times = time2;
                        }
                        return time.getTime() < new Date(this.form.confirmStartDate).getTime();
                    }
                }
            },
            pickerOptions4: {
                disabledDate: time => {
                    if (this.form.cosArrangeStartDate) {
                        return time.getTime() < new Date(this.form.cosArrangeStartDate).getTime() - 86400000;
                    }
                }
            },
            pickerOptions5: {
                disabledDate: time => {
                    if (this.form.expenseReiburEndDate && !this.form.cosArrangeStartDate) {
                        return time.getTime() > new Date(this.form.expenseReiburEndDate).getTime();
                    } else if (this.form.cosArrangeStartDate && !this.form.expenseReiburEndDate) {
                        return time.getTime() < new Date(this.form.cosArrangeStartDate).getTime();
                    } else if (this.form.cosArrangeStartDate && this.form.expenseReiburEndDate) {
                        return time.getTime() > new Date(this.form.expenseReiburEndDate).getTime() || time.getTime() < new Date(this.form.cosArrangeStartDate).getTime();
                    }
                }
            },
            pickerOptions6: {
                disabledDate: time => {
                    if (this.form.cosArrangeStartDate && !this.form.expenseReiburStartDate) {
                        return time.getTime() < new Date(this.form.cosArrangeStartDate).getTime() - 86400000;
                    } else if (this.form.expenseReiburStartDate) {
                        return time.getTime() < new Date(this.form.expenseReiburStartDate).getTime() - 86400000;
                    }
                }
            },
            pickerOptions7: {
                disabledDate: time => {
                    if (this.form.practiceRetakeStartDate && this.form.practiceRetakeEndDate) {
                        let times = new Date(this.form.practiceRetakeEndDate).getTime();
                        return time.getTime() > times
                    }
                }
            },
            pickerOptions8: {
                disabledDate: time => {
                    if (this.form.practiceRetakeStartDate) {
                        return time.getTime() < new Date(this.form.practiceRetakeStartDate).getTime() - 86400000;
                    }
                }
            }
        };
    },

    methods: {
        calendarChange() {
            this.searchList(true);
        },
        onSubmit(){
            this.searchList(true);
        },
        searchList(refresh) {
            if(refresh){
                this.page.pageNum_ = 1
            }
            queryList(
                this.page.pageNum_,
                this.page.pageSize_,
                this.condition.yearTerm
            ).then(res => {
                if (res.code === 200) {
                    this.page.total_ = res.data.total;
                    this.tableData = res.data.records;

                }
            });
        },
        loadDone(data) {
            this.calendarCopy = this.condition.yearTerm;
            this.searchList();
        },
        handleSizeChange(val) {
            this.page.pageSize_ = val;
            this.searchList();
        },
        handleCurrentChange(val) {
            this.page.pageNum_ = val;
            this.searchList();
        },
        reset() {
            this.condition.yearTerm = this.calendarCopy;
            this.searchList(true);
        },
        add() {
            this.showDialog = true;
            this.disabled = false;
            this.form.yearTerm = this.calendarCopy;
            this.form.confirmStartDate = null;
            this.form.confirmEndDate = null;
            this.form.cosArrangeStartDate = null;
            this.form.cosArrangeEndDate = null;
            this.form.expenseReiburStartDate = null;
            this.form.expenseReiburEndDate = null;
            this.form.practiceRetakeEndDate = null;
            this.form.practiceRetakeStartDate = null;
            this.form.activeFlag = "";
            this.form.id = "";
            this.type = "0";
            this.title = this.$t('internSetup.title.addInternTitle');
            this.$nextTick(() => {
                this.$refs['form'].clearValidate();
            })
        },
        editor(row) {
            this.id = row.id;
            for (const key in this.form) {
                if (this.form.hasOwnProperty(key)) {
                    this.form[key] = row[key]
                }
            }
            this.showDialog = true;
            this.type = "0";
            this.title = this.$t('internSetup.title.editInternTitle');
            this.disabled = false;

        },
        del(row) {
            this.$confirm(this.$t('message.areYouSureDelete'), this.$t('message.prompt'), {
                confirmButtonText: this.$t('message.confirm'),
                cancelButtonText: this.$t('message.cancel'),
                type: "warning"
            }).then(() => {
                deleApi({ id: row.id }).then(res => {
                    if (res.code === 200) {
                        this.$message({
                            type: "success",
                            message: this.$t('message.deleteSuccess')
                        });
                        this.searchList(true);
                    }
                });

            }).catch(e => { });
        },
        details(row) {
            this.detailsform = row;
            this.detailsDialog = true;
            this.disabled = true;
            this.title = this.$t('internSetup.title.detailInternTitle');
            this.type = "1";
        },
        //取消对话框
        cancelDialog() {
            // this.searchList();
            this.showDialog = false;
            this.detailsDialog = false;
        },
        submitForm() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    if (this.title === this.$t('internSetup.title.addInternTitle')) {
                        addLabel(this.form).then(res => {
                            if (res.code === 200) {
                                this.$message({
                                    type: "success",
                                    message: this.$t('message.addSuccess')
                                });
                                this.showDialog = false;
                                this.searchList(true);
                            } else {
                                this.$message({
                                    type: "error",
                                    message: this.$t('internSetup.tips.submitFail')
                                });
                                this.showDialog = false;
                            }
                        });
                    } else {
                        this.form.id = this.id;
                        update(this.form).then(res => {
                            if (res.code === 200) {
                                this.$message({
                                    type: "success",
                                    message: this.$t('message.editSuccess')
                                });
                                this.showDialog = false;
                                this.searchList(true);
                            } else {
                                this.$message({
                                    type: "error",
                                    message: this.$t('internSetup.tips.submitFail')
                                });
                                this.showDialog = false;
                            }
                        });
                    }
                }
            });
        },
        time(e) {
            if (e === null) {
                return this.$t('internSetup.tips.long')
            } else {
                return e
            }
        },
        indexMethod(index) {
          return (this.page.pageNum_ - 1) * this.page.pageSize_ + index + 1;
        },
    }
};
</script>
<style lang="scss" scoped>
.details-table {
    border: 2px solid #e5e9f2;
}
.row-height {
    height: 50px;
    text-align: center;
    border-bottom: 1px solid #e5e9f2;
    .div-flex {
        display: flex;
        height: 100%;
        &.div-left {
            justify-content: flex-start;
        }
        .div-flex-left {
            flex: 1;
            text-align: right;
            height: 100%;
            border-right: 1px solid #e5e9f2;
            background-color: rgba(245, 247, 249, 1);
            line-height: 50px;
        }
        .div-flex-last-right {
            flex: 2;

            text-align: center;
            line-height: 50px;
        }
    }
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
    width: 100%;
}
.el-select {
    width: 100%;
}
</style>
